<!--群聊消息显示模板-->
<template>
    <div>
        <div style="width:100%;text-align:center;font-size:0.8rem;color:#aaa;" v-if="timeShow == true">
            {{ timefinall }}
        </div>
        <div class="messageitem" v-if="messageobj.sendid =='local'">
            <!-- ||messageobj.sendid == null -->
            <!-- 发送的 -->
            <div style="display:flex;flex-direction:column;width:100%">
                <div style="text-align:right;margin-right:0.2rem;font-size:0.8rem;color:#999;">
                    <p class="messageTitleName">本机
                    <img class="avata" src="img/headimg/head_icon_3.png" alt/>
                    </p>
                </div>
                <div style="display:flex;">
                    <div class="messageidv" @click="playrec">
                        <div class="msgbox" v-if="messageobj.type==='文字'">
                            {{messageobj.content }}
                        </div>
                        <div class="msgbox" v-if="messageobj.type==='语音'">
                            <van-icon name="volume-o" style="margin:0 0.8rem"/>{{'......'}}
                        </div>
                        <div class="msgbox" v-if="messageobj.type==='图片'" style="padding: 0;background-color: rgba(255,255,255,0)">
                            <viewer @inited="inited">
                                <van-image :src="messageobj.content" style="width: 10rem;height: 10rem" @click="expand"></van-image>
                            </viewer>
                            
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- 收到的 -->
        <div class="messageitem" v-if="messageobj.sendid != 'local'">
            <!-- <div class="messageitem"> -->
            <div style="display:flex; flex-direction:column;width:100%">
                <div style="text-align:left;margin-left:0.2rem; font-size:8rem;color:#999;">
                    <p class="messageTitleName2">{{ messageobj.sendid }}
                        <img class="avata2" src="img/headimg/head_icon_1.png" alt/>
                    </p>
                </div>
                <div style="display:flex;">
                    <div class="messagediv2" @click="playrec">
                        <div class="msgbox2" v-if="messageobj.type==='文字'">
                            {{messageobj.content}}
                        </div>
                        <div class="msgbox2" v-if="messageobj.type==='语音'">
                            <div v-show="messageobj.isread===0" style="width: 5rem">
                                <!-- background="background: rgba(197, 197, 197, 0.3);" -->
                                <!-- <van-notice-bar
                                        style="margin:0"
                                        background = "rgba(197, 197, 197, 0.3)"
                                        color="black"
                                        left-icon="volume-o"
                                        text="......"
                                        
                                /> -->
                                 <van-icon name="volume-o" style="margin:0 0.8rem;color:white"/>{{'......'}}
                                <!-- text="语音接收中..." -->
                            </div>
                            <div v-show="messageobj.isread===1">
                                <van-icon name="volume-o" style="margin:0 0.8rem"/>{{'  ......'}}
                            </div>

                        </div>
                        <div class="msgbox2" v-if="messageobj.type==='图片'" style="padding: 0">
                            <!-- <div v-show="messageobj.isread===0" style="padding: 1rem">
                                <van-circle v-model="startNum" speed="30" size="4rem" :clockwise="false" :text="text" />
                            </div> -->
                            <!-- v-show="messageobj.isread===1" -->
                            <div>
                                <viewer @inited="inited">
                                    <van-image :src="messageobj.content" style="width: 10rem;height: 10rem" @click="expand"></van-image>
                                </viewer>
                            </div>

                        </div>
<!--                        <div class="msgbox2">-->
<!--                            {{ messageobj.content.substring(messageobj.content.length - 4) == '.amr' ? '📢...' : messageobj.content }}-->
<!--                            &lt;!&ndash; {{ messageobj.time }} &ndash;&gt;-->
<!--                        </div>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {caldatetime,datetimeToStamp} from '../../utils/timecal';
import {caldatetime2} from '../../utils/caldatetime'

export default {
    props: {
        dt: Object,
        // scrollfun: Function,
        list: Array,
        preindex: Number,
        objName:String
    },
    data() {
        return {
            startNum:10,
            messageobj: this.dt,
            timefinall: null,
            lastTime:"",
            recentTime:"",
            timeShow:false,
        }
    },
    methods: {
        caltimestyle() {
            this.recentTime = this.list[this.preindex].time;
            var currenttimestamp = this.list[this.preindex].time;
            if (!this.preindex) {
                this.timefinall = currenttimestamp
            } else {
                let pretimestamp = this.list[this.preindex - 1].time;
                this.lastTime = this.list[this.preindex - 1].time;
                this.timefinall = pretimestamp
            }
            this.timefinall = currenttimestamp;
            this.calcTimeMinus(this.recentTime,this.lastTime)
            
        },

        calcTimeMinus(time1,time2){
            let date1 = new Date(time1);
            let date2 = new Date(time2);
            var date3 = (date1 - date2)/1000;
            if(date3>300){
                this.timeShow = true;
            }else{
                this.timeShow = false;
            }

        },
        playrec() {
            if (this.messageobj.content.substring(this.messageobj.content.length - 4) == '.txt') {
                $App.playVoice(this.messageobj.content)
            }
        },

        expand(){
            // console.log("图片放大啦");
        },

        inited (viewer) {
        this.$viewer = viewer
        // this.$viewer.index = this.activeIndex
        // 不要他的按钮
        // this.$viewer.options.button = false
        // 不要他的底部缩略图
        this.$viewer.options.navbar = false
        // 不要他的底部标题
        this.$viewer.options.title = false
        // 不要他的底部工具栏
        // this.$viewer.options.toolbar = false
    },

    },
    mounted() {
        this.caltimestyle();
    },
    beforeUpdate(){
        // this.scrollfun();
    },
    computed: {
        text() {
            return parseInt(this.startNum/33+1) + '/4包';
        },
    },
    

}
</script>
<style scoped>
.messageitem {
    width: 100%;
    display: flex;
    overflow: hidden;
    padding: 0.2rem 0;
    margin: 0.2rem 0;
}
.messageTitleName{
    line-height: 2rem;
    font-size: 1rem;
    margin-right: 0.2rem;
}
.avata {
    height: 2rem;
    width: 2rem;
    border-radius: 50%;
    /* border: 1px solid #000; */
    float: right;
    /*right: 0.5rem;*/
    margin: 0 0.5rem;
}
.messageTitleName2{
    line-height: 2rem;
    font-size: 1rem;
    margin-left: 0.2rem;
}
.avata2 {
    height: 2rem;
    width: 2rem;
    border-radius: 50%;
    /* border: 1px solid #000; */
    float: left;
    /*left: 0.5rem;*/
    margin: 0 0.5rem;
}
.messageidv {
    flex: 1;
    padding-left: 1rem;
    color: #000;
    display: flex;
    overflow: hidden;
}
.messagediv2 {
    flex: 1;
    padding-right: 1rem;
    color: #000;
    display: flex;
    overflow: hidden;
}
.msgbox {
    border-radius: 0.5rem 0 0.5rem 0;
    padding:0.1rem 0.5rem;
    margin-left: auto;
    margin-right: 3rem;
    overflow: hidden;
    word-wrap: break-word;
    color: #fff;
    line-height: 2rem;
    font-size: 1rem;
    letter-spacing: 0.05rem;
    background: #3089dc;
}
.msgbox2 {
    border-radius:0 0.5rem 0 0.5rem;
    padding:0.1rem 0.25rem;
    margin-right: auto;
    margin-left: 3rem;
    overflow: hidden;
    word-wrap: break-word;
    line-height: 2rem;
    font-size: 1rem;
    letter-spacing: 0.05rem;
    background: rgba(197, 197, 197, 0.3);
}
.van-notice-bar{
    height:32px;
    
}
</style>